<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo_five.html</title>
    </head>
    <body>
        <div id="myDiv">使用原生的AJAX修改该文本的内容(前端展示的数据)</div>
        <button type="button" onclick="loadXMLDoc()">修改内容</button>

       <script type="text/javascript">
           function loadXMLDoc() {
               //实例化xhr对象
               var xhr = new XMLHttpRequest();
               //使用xhr对象进行数据填充和发送请求
               //参数1：请求类型  参数2：请求路径  参数3：是否异步（异步：true  同步：false）
               xhr.open("POST", "../jsp/demo_five.jsp", true);
               //发送请求(带参数)，必须要有请求头(由于post带参数可以传图片、音视频等二进制文件数据)，且必须在send中传参
               xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
               xhr.send("name=张三&age=20");
               //回调函数
               xhr.onreadystatechange = function() {
                   if (xhr.readyState == 4 && xhr.status == 200) {
                       //获取服务端返回的文本内容
                       document.getElementById("myDiv").innerHTML = xhr.responseText;
                   }
               }
           }
       </script>
    </body>
</html>